import { ProColumns, ProTable } from '@ant-design/pro-components';
import { ProFormInstance } from '@ant-design/pro-form/lib';
import '@umijs/max';
import { Modal } from 'antd';
import React, { useEffect, useRef } from 'react';

export type UpdateFormProps = {
  value: API.InterfaceInfo;
  columns: ProColumns<API.InterfaceInfo>[];
  onCancel: () => void;
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  open: boolean;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const { value, open, columns, onCancel, onSubmit } = props;
  const ref = useRef<ProFormInstance>();
  useEffect(() => {
    if (ref.current) {
      ref.current.setFieldsValue(value);
    }
  }, [value]);
  return (
    <Modal
      open={open}
      onCancel={() => {
        onCancel?.();
      }}
      footer={null}
    >
      <ProTable
        type="form"
        columns={columns}
        formRef={ref}
        onSubmit={async (formValues) => {
          const mergedValues = { ...value, ...formValues };
          await onSubmit(mergedValues);
        }}
      ></ProTable>
    </Modal>
  );
};
export default UpdateForm;
